<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="active">3</li>
        <li>4</li>
        <li><span>5</span> </li>
    </ul>

    <script>

        // 筛选器其他：
        // 1.元素下一个所有的兄弟元素  nextAll();
        // $(document).click(function(){
        //     $("li").eq(1).nextAll().css("background","red");
        // })

        // 2.元素的上一个所有的兄弟元素  prevAll()
        // $(document).click(function(){
        //     $("li").eq(2).prevAll().css("background","red");
        // })

        // 3.获取当前元素的所有兄弟元素 siblings
        // $(document).click(function(){
        //     $("li").eq(2).siblings().css("background","red");
        // })

        // 4.获取当前元素的父级元素；parent
        // $(document).click(function(){
        //     $("li").eq(1).parent().css("background","red");
        // })

        // 5.获取当前元素的所有父级元素：parents
        // $(document).click(function(){
        //   let res =   $("li").parents();
        //   console.log(res);
            
        // })

        // 6.not 不包含某个元素；
        // $(document).click(function(){
        //     // $("li").not(".active").css("color","red");
        //     $("li").not($(".active")).css("color","red");
        // })

        // 7.index():可以获取当前元素再兄弟元素中的索引值；
        // $(document).click(function(){
        //     let index =  $(".active").index();
        //     console.log(index);
        // })

        $("li").click(function(){
            // console.log(this);
           let index =  $("li").index($(this));
           console.log(index);
        })


        // 通过jq实现一个tab选项卡 ；
        // 1.熟悉 jq的api 2.选项卡实现 3.借助于jq 来封装一个轮播图(通过面向对象来封装) 4.静态项目页面；
        // $(".box").animate()
        /*
        var mySwiper = new Swiper ('.swiper', ["1.jpg","2.jpg","3.jpg"])        


        */


    </script>
</body>
</html>